<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_员工列表练习</title>
</head>
<body>

<input type="text" placeholder="请输入员工姓名" id="name">
<input type="text" placeholder="请输入员工工资" id="say">
<input type="text" placeholder="请输入员工岗位" id="job">
<button onclick="add()">添加员工</button>
<hr>
<table border="1">
    <caption>员工列表</caption>
    <tr>
        <th>员工姓名</th>
        <th>员工工资</th>
        <th>员工岗位</th>
    </tr>
</table>
<script>
    //定义新增员工的方法
    function add(){
        let username =document.getElementById('name').value;//获取员工的姓名
        let usersay =document.getElementById('say').value;//获取员工的工资
        let userjob =document.getElementById('job').value;//获取员工的岗位

        /*对数据进行非空校验*/
        if (username.trim()==''||usersay.trim()==''||userjob.trim()==''){
            alert('请填写完整的员工信息');
            return;
        }
        let trE=document.createElement('tr');//创建tr标签
        let nameTd=document.createElement('td');//创建td标签
        let sayTd=document.createElement('td');//创建td标签
        let jobTd=document.createElement('td');//创建td标签

        nameTd.innerHTML=username;//将获取的姓名写入td标签中
        sayTd.innerHTML=usersay;//将获取的工资写入td标签中
        jobTd.innerHTML=userjob;//将获取的岗位写入td标签中
        trE.append(nameTd,sayTd,jobTd);//将td标签写入tr标签中
        let tableE=document.querySelector('table');//获取列表table元素
        tableE.append(trE);//将tr标签写入table标签中
        //定义一个数组保存员工数据
        let arr=[];
        /*方法1*/
        // let emp={
        //     name:username,
        //     say:usersay,
        //     job:userjob
        // };
        // arr.push(emp);

        /*方法2*/
        //push 向数组中添加数据，将数据保存到数据库
        arr.push({
            name:username,
            say:usersay,
            job:userjob
        });
        document.getElementById('name').value='';
        document.getElementById('say').value='';
        document.getElementById('job').value='';

    }



</script>
</body>
</html>